<template>
    <div class="detailMess">
        <div class="header">
           <div class="header_top">
               <div @click="toLogin()" v-if="!store.state.isLogin">用户登录</div>|
               <div @click="toLogin()" v-if="!store.state.isLogin">免费注册</div>
               <div v-if="!store.state.isLogin" style="display: none"></div>
               <div class="username"  @click="toUserCenter()" v-else> 用户：{{ store.state.userInfo.username }}</div>|
               <div>服务热线：</div>|
               <div>xxxxxxxxxxxxx</div>
           </div>
           <div class="header_center">
               <div>汽车租聘市场</div>
               <div @click="toIndex()">网站首页</div>
               <div style="color: #ccc;">我要租车</div>
               <div  @click="toUserCenter()">我要还车</div>
           </div>
       </div>
        <div class="main">
        <div class="main_top">
            <div class="main_top_left">
                <img :src="route.query.startImage">
            </div>
            <div class="main_top_right">
                <div class="" style="font-size: 25px;font-weight: bold;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ route.query.name }}</div>
                <div class="" style="font-size: 20px;font-weight: bold;color: crimson;">市场销售价格：￥{{ route.query.fake_price }} /天</div>
                <div class="" style="font-size: 30px;display: flex;">
                    <div style="width: 40px;margin-top: 5px;"><el-icon><AlarmClock /></el-icon></div>
                    <div>限时活动价格：￥{{ route.query.price  }} /天</div>
                </div>
                <div class="">
                    <div style="margin-left: 10%;">
                        <div style="border-left: 1px solid #ccc;">2021年08月</div>
                        <div>1.43万公里</div>
                        <div>2.0TL</div>
                        <div>国六</div>

                    </div>
                    <div style="margin-left: 10%;text-align: center;color: gray;">
                        <div>上牌</div>
                        <div>里程</div>
                        <div>排量</div>
                        <div>排放标准</div>
                    </div>
                </div>
                <div class="btnBox" >
                    <el-button type="primary" style="width: 200px;height: 50px;"  @click="buyCard()" icon="pointer" :loading="isLoading">购租</el-button>
                </div>
            </div>
        </div>
        <div class="title">基本信息</div>
        <div class="mian_center">
            <div>
                <div>归属地：</div>
                <div>广州</div>
                <div>车型：</div>
                <div>小型车</div>
                <div>颜色：</div>
                <div>黑色</div>
                <div>排量：</div>
                <div>2.0T</div>
                <div>变速箱：</div>
                <div>手自一体</div>
                <div>行驶里程：</div>
                <div>1.43万公里</div>
                <div>国产进口：</div>
                <div>无</div>
                <div>上牌日期：</div>
                <div>2021年08月</div>
                <div>燃油类型：</div>
                <div>汽油</div>
                <div>排放标准：</div>
                <div>国六</div>
                <div>年检到期：</div>
                <div>024年08月</div>
                <div>保险到期：</div>
                <div>2023年08月</div>
            </div>
            <div class="title">亮点配置</div>
            <div class="cardConfig">
                <img src="../static/cardConfig.png" style="object-fit: contain;width: 100%;">
            </div>
            <div class="title">车主描述</div>
            <div class="desc">
                {{ route.query.desc }}
            </div>
            <div class="title">实拍照片</div>
            <div class="realPicture">
                <img :src="route.query.startImage">
            </div>
        </div>
    </div>
    <div class="footer">
            <div class="footer_left">
               <div style="padding-top: 50px;">售后服务电话</div>
               <div>xxxxxxxxxxxxxxx</div>
               <div>153xxxxxx@qq.com</div>
            </div>
            <div class="footer_center">
                <div>租车宝典</div>
                <div>客服中心</div>
                <div>意见反馈</div>
                <div>联系我们</div>
                <div>其它</div>
                <div style="color: #ccc;">车辆鉴别</div>
                <div style="color: #ccc;">人才招聘</div>
                <div style="color: #ccc;">合作加盟</div>
                
            </div>
        </div>
        <dialogForm ref="dialogFormComp"></dialogForm>
        <message-comp ref="ref_messageComp"></message-comp>
</div>
   
  
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import { useStore } from 'vuex'
const store = useStore()
import dialogForm from "../components/dialogForm.vue";
import messageComp from "../components/messageComp.vue";
const ref_messageComp = ref(null) //弹窗message组件refs
const dialogFormComp = ref(null) //弹窗message组件refs
import { useRoute, useRouter } from "vue-router";
const router = useRouter()
let route = useRoute();//接受跳转参数，不能放到ref里，会变成异步
let isLoading = ref(false)
// 数据


// 函数
const toUserCenter = ()=>{
    router.push({
        path:'/userCenter',
    })
}
const toIndex = ()=>{
    router.push({
        path:'/index',
    })
}
const toLogin = ()=>{
    router.push({
        path:'/login',
    })
}
const buyCard = ()=>{
    isLoading.value = true
    setTimeout(() => {
        isLoading.value = false
        dialogFormComp.value.changeDialogVisible(route.query) //打开提交表单组件
    }, 1000);
    console.log('打印');
    // console.log(dialogFormComp.value.changeDialogVisible());
}
store.commit('userInfo') //检查一下是否登录了
</script>

<style scoped src="../css/detailMess.css">

</style>